<template>
	<view>
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar :leftText="title" :autoBack="true">
			</u-navbar>
		</view>
		<view class="con-body" style="background-color: #f8f8f8;">
			<view style="padding:20rpx;margin-bottom: 20rpx;">
				<image style="width:100%;height:300rpx;border-radius: 20rpx;" mode="aspectFill" :src="detail.image"></image>
			</view>
			<view style="background-color: #fff;font-size: 30rpx;color:#555;">
				<view style="padding:20rpx;font-size: 32rpx;color:#333;font-weight: bold;">
					<text>{{detail.name}}</text>
				</view>
				<view style="padding:0 20rpx 20rpx;font-size: 28rpx;">营业时间：{{detail.business}}</view>
				<view class="u-flex u-row-between" style="padding:0rpx 20rpx 20rpx;border-bottom:1rpx solid #f8f8f8;font-size: 28rpx;">
					<text style="width:90%;">电话：{{detail.phone}}</text>
					<view style="width:10%;text-align: right;" @click="tocall(detail.phone)">
						<u-icon name="phone-fill" color="#008987" size="28"></u-icon>
					</view>
					
				</view>
				
			</view>
			<!-- <view style="padding:20rpx;font-size: 30rpx;">
				地图标注
			</view> -->
			<view style="background-color: #fff;padding:20rpx;margin-top:20rpx;">
				<view style="padding:20rpx 0;font-size: 28rpx;color:#666;">
					<!-- <text>详细地址:</text> -->
					<text>{{detail.address}}</text>
				</view>
				<map style="width:100%;height:500rpx;" scale="14" :latitude="detail.lat" :longitude="detail.lng" :markers="markers"></map>
			</view>
			
			<view style="padding:20rpx;font-size: 30rpx;">
				详细内容
			</view>
			<view style="background-color: #fff;padding:20rpx;font-size: 28rpx;color:#666;margin-bottom:100rpx;">
				<rich-text :nodes="detail.content"></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				title:'便民服务',
				detail:{},
				markers:[{
					id: 1,
					title: '位置', // String
					latitude: 0,
					longitude: 0,
					// callout: {
					// 	color:'#007AFF', //文本颜色
					// 	bgColor: '#fff', //背景色
					// 	display:'ALWAYS', // 'BYCLICK':点击:
					// 	fontSize: 15,
					// 	textAlign: 'left', //文本对齐方式。
					// 	padding: 10,//文本边缘留白
					// 	borderRadius: 5,
					// 	content: '',
					// },
					label: {
						content:'地址' ,
						color: '#000000',
						fontSize: 12,
						borderwidth: 12,
						borderColor:'#007AFF',
						borderRadius: 5,
						padding: 5,
						textAlign: 'center',
						bgColor:'#fff',
					},
					width:20,
					height:30,
					iconPath: 'https://resourse.cnlhjt.com/upload/20220830/d0bd94e4da44bf9d8fc78b21f43d1e57.png'

				},{
					id:2,
					title:'位置',
					latitude: 0,
					longitude: 0,
					label: {
						content:'地址' ,
						color: '#000000',
						fontSize: 12,
						borderwidth: 12,
						borderColor:'#007AFF',
						borderRadius: 5,
						padding: 5,
						textAlign: 'center',
						bgColor:'#fff',
					},
					width:25,
					height:25,
					iconPath:'https://resourse.cnlhjt.com/upload/20220830/0d77ab8faec87aeaf0308b479f8ad415.png'
				}]
			}
		},
		onLoad(options) {
			// console.log(options)
			var item={};
			item=JSON.parse(options.item);
			this.detail=item;
			this.title=item.name;
			this.markers[0].latitude=item.lat;
			this.markers[0].longitude=item.lng;
			this.markers[0].title=item.address;
			this.markers[0].label.content=item.address;
			// this.markers[0].iconPath=item.image;
			
			this.location();
		},
		methods:{
			tocall(e){
				uni.makePhoneCall({
					phoneNumber:e
				})
			},
			location(){
				var that=this;
				uni.getLocation({
					type: 'gcj02',
					success: function(res){
						that.markers[1].latitude=res.latitude;
						that.markers[1].longitude=res.longitude;
						that.markers[1].title='您的位置';
						that.markers[1].label.content='您的位置';
					},
					fail: function(err) {
						console.log(err);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f8f8f8;
	}
</style>
